import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import weixinShare from '../../lib/weixinShare';
import { addErrorListener } from '../../lib/handleError';

import AJAX from '../../lib/ajax';

const Dialog = require('../MyPackage/components/Dialog')

require('../../lib/rem');
require('../../styles/common.less');
require('./DebangOrder.less');
require('../../styles/iconfont/iconfont.css');

class SendExpress extends Component {
  constructor(props) {
    super(props)

    this.state = {
      isReady: false,     //是否可以加载页面
      SenderInfo: {
        name: '',
        phone: '',
        address: ' '
      }, // 寄件人信息
      ReceiverInfo: { // 收件人信息
        name: '',
        phone: '',
        address: ''
      },
      price: 0,
      makeTime: '2019-07-10 12:00:00', // 预约时间
      goodsType: '',
      goodsWeight: 0, // 默认重量
    };
  }

  componentWillMount() {
    addErrorListener()()
    weixinShare.hideAll()
  }

  componentDidMount() {
    AJAX.appendBaiduAnalysis()

    this.fetchOrder()

    setTimeout(() => {
      this.setState({
        isReady: true, //是否可以加载页面
      })
    }, 10)
  }

  fetchOrder () {
    const url = window.location.href;
    if (url.indexOf('order_id=') < 0) {
      Dialog.info({
        title: "出错了",
        content: '订单号不存在',
        okText: "确认",
        onOK: () => {
          WeixinJSBridge.call('closeWindow');
        }
      })
    } else {
      const query = (url.substring(url.indexOf('?') + 1, url.length)).split('&');

      const order_id = query[0].split('=')[1];
      const params = {
        id: order_id
      }

      AJAX.fetchGet('orderInfo', params, res => {
        res.sendStartTime = res.sendStartTime.split(' ');
        res.sendStartTime[1] = res.sendStartTime[1].split(':');
        res.sendEndTime = res.sendEndTime.split(' ');
        res.sendEndTime[1] = res.sendEndTime[1].split(':');
        const timer = `${res.sendStartTime[0]} ${res.sendStartTime[1][0]}:${res.sendStartTime[1][1]}-${res.sendEndTime[1][0]}:${res.sendEndTime[1][1]}`

        this.setState({
          SenderInfo: {
            name: res.sender.name,
            phone: res.sender.mobile || res.sender.phone,
            address: res.sender.province + res.sender.city + res.sender.county + res.sender.address
          },
          ReceiverInfo: {
            name: res.receiver.name,
            phone: res.receiver.mobile || res.receiver.phone,
            address: res.receiver.province + res.receiver.city + res.receiver.county + res.receiver.address
          },
          price: res.insuranceValue / 100,
          makeTime: timer,
          goodsType: res.cargoName,
          goodsWeight: res.totalWeight
        })
      })
    }
  }

  render () {
    return (
      this.state.isReady &&
      <div style={{height: '100vh', backgroundColor: '#f0f0f0', display: 'flex'}}>
        <div className="express">
          <section className="card">
            <ul className="editList">
              <li>
                <div className="icon">
                  <span className="iconSend">寄</span>
                  <em className="iconLine top"></em>
                </div>
                <div className="edit">
                  <h2>{this.state.SenderInfo.name}<span>{this.state.SenderInfo.phone}</span></h2>
                  <p>{this.state.SenderInfo.address}</p>
                </div>
              </li>

              <li>
                <div className="icon">
                  <span className="iconAddress">收</span>
                  <em className="iconLine bottom"></em>
                </div>
                <div className="edit">
                  <h2>{this.state.ReceiverInfo.name}<span>{this.state.ReceiverInfo.phone}</span></h2>
                  <p>{this.state.ReceiverInfo.address}</p>
                </div>
              </li>
            </ul>
          </section>

          <section className="card">
            <ul className="power">
              <li className="powerPrice">
                <label>
                  货物总量预估
                </label>
                <span>
                  <strong>{this.state.goodsWeight}kg</strong>
                </span>
              </li>

              <li className="powerPrice">
                <label>
                  保价服务
                </label>
                <span>
                  <input type="number" ref="price" readOnly value={this.state.price} defaultValue={this.state.price} placeholder="请输入保价"/>
                  <em>元</em>
                </span>
              </li>

              <li className="powerPrice">
                <label>
                  货物信息
                </label>
                <span>
                  <strong>{this.state.goodsType}</strong>
                </span>
              </li>

              <li className="powerPrice">
                <label>
                  上门时间
                </label>
                <span>
                  <strong>{this.state.makeTime}</strong>
                </span>
              </li>
            </ul>
          </section>
        </div>
      </div>
    )
  }
}
ReactDOM.render(<SendExpress />, document.getElementById('app'));
if (module.hot) {
  module.hot.accept();
}

